<template>
    <div class="bigbox">
        <p>退货商品</p>
        <div class="smallbox">
            <el-table :data="tableData" ref="multipleSelection" style="width: 100%" :border="true">
                <el-table-column align="center" label="商品图片" width="120">
                    <template #default="scope">
                        <img :src="scope.row.productPic" alt="" style="width: 120px;">
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="productName" label="商品名称" width="200" />
                <el-table-column align="center" prop="productPrice" label="价格/货号" width="200" />
                <el-table-column align="center" prop="productAttr" label="属性" width="200" />
                <el-table-column align="center" prop="productCount" label="数量" width="100" />
                <el-table-column align="center" prop="productRealPrice" label="小计" />
            </el-table>
        </div>
    </div>
    <div class="serve">
        <div class="one">
            <el-descriptions :column="1" v-for="item in tableData" title="服务单信息" border>
                <el-descriptions-item label="id">{{ item.id }}</el-descriptions-item>
                <el-descriptions-item label="申请状态">{{ item.receiveStatus }}</el-descriptions-item>
                <el-descriptions-item label="订单编号">{{ item.orderSn }}
                    <el-button @click="orderDetail">查看</el-button>
                </el-descriptions-item>
                <el-descriptions-item label="申请时间">
                    <div>
                        {{ item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="用户账号">{{ item.memberUsername }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ item.returnName }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ item.returnPhone }}</el-descriptions-item>
                <el-descriptions-item label="退货原因">{{ item.reason }}</el-descriptions-item>
                <el-descriptions-item label="问题描述">{{ item.description }}</el-descriptions-item>
                <el-descriptions-item label="凭证图片">
                    <img :src="item.productPic" alt="" style="width: 100px;">
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="one">
            <el-descriptions :column="1" v-for="item in tableData" border>
                <el-descriptions-item label="处理人员">{{ item.productRealPrice }}</el-descriptions-item>
                <el-descriptions-item label="处理时间">{{ item.returnAmount }}</el-descriptions-item>
                <el-descriptions-item label="处理备注">{{ item.companyAddress.addressName }}</el-descriptions-item>
                <el-descriptions-item label="收货人姓名">{{ item.companyAddress.name }}</el-descriptions-item>
                <el-descriptions-item label="所在区域">{{ item.companyAddress.province }} {{ item.companyAddress.region
                }}</el-descriptions-item>
                <el-descriptions-item label="详细地址">{{ item.companyAddress.detailAddress }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ item.returnPhone }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="one">
            <el-descriptions :column="1" v-for="item in tableData" border>
                <el-descriptions-item label="处理人员">{{ item.admin }}</el-descriptions-item>
                <el-descriptions-item label="处理时间">
                    <div>
                        {{ item.handleTime ? dayjs(item.handleTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="处理备注">{{ item.handleNote }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="one">
            <el-descriptions :column="1" v-for="item in tableData" border>
                <el-descriptions-item label="收货人员">{{ item.admin }}</el-descriptions-item>
                <el-descriptions-item label="收货时间">
                    <div>
                        {{ item.receiveTime ? dayjs(item.receiveTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="收货备注">{{ item.handleNote }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>



<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue'
import * as api from '../../request/api'
import useTabel from '../../hooks/useTables'
import dayjs from 'dayjs'
const router = useRouter()
let id = ref(useRoute().query.id)
let tableData = ref<any[]>([])

interface User {
    num: number | string
    name: string
}

const multipleSelection = ref<User[]>([])

// 接收returnApply传过来的参数id 和数据

let aaa = async () => {
    let aaaa = await api.admin.returnApplyDetail({ id: id.value })

    tableData.value.push(aaaa)
    console.log(tableData.value);
}
aaa()


// 点击跳转orderDetail页面
let orderDetail = () => {
    router.push({ path: '/oms/orderDetail', query: { id: id.value } })
}


</script>

<style scoped lang="scss">
.bigbox {
    width: 60%;
    height: 250px;
    border: 1px solid rgb(215, 211, 211);
    margin: auto;
    margin-top: 80px;

    p {
        margin: 20px 20px;
    }

    .smallbox {
        width: 95%;
        height: 150px;
        border: 1px solid rgb(215, 211, 211);
        margin: 0 auto;
        margin-top: 20px;
    }
}

.serve {
    width: 60%;
    border: 1px solid rgb(215, 211, 211);
    margin: auto;
    margin-top: 20px;
    height: 1200px;

    p {
        margin: 20px 20px;
    }

    .one {
        width: 95%;
        margin: 0 auto;
        margin-top: 20px;
    }
}
</style>